<template>
    <div class="goodsEntry">
      <div style="padding:20px">
          <el-button type="primary" @click="returnOver">返回</el-button>
            <ul class="query">
                    <!-- <li class="query-item">
                     商品名称：{{tableData[0].goodsName}}
                    </li>
                    <li class="query-item">
                     入库类型：新酒入库
                    </li> -->
                    <!-- <li class="query-item">
                    入库时间：{{tableData[0].}}
                    </li>
                    <li class="query-item">
                    经办人：
                    </li> -->
                   
                  </ul>
          <div style="margin-top:20px">盘点详情</div>
            <div class="wrapper">
                    <el-table class="table" :data="tableData" stripe highlight-current-row border>
                      
                      <el-table-column align="center" prop="goodsName" label="商品名称">
                      </el-table-column>
                      <el-table-column align="center" prop="skuNo" label="sku编码">
                      </el-table-column>
                     
                      <el-table-column align="center" prop="odorType" label="香型">
                        </el-table-column>
                     <el-table-column align="center" prop="netContent" label="净含量">
                      </el-table-column>
                      <!-- <el-table-column align="center" prop="sumPcs" label="购买总量">
                      </el-table-column> -->
                      <el-table-column align="center" prop="unit" label="单位">
                      </el-table-column>
                      <el-table-column align="center" prop="alocohl" label="酒精度">
                      </el-table-column>
                      <el-table-column align="center" prop="rawDesc" label="原料">
                      </el-table-column>
                     
                     
                    </el-table>
                   
            </div>
            <!-- <div>酒的信息</div>
            <div class="wrapper">
                    <el-table class="table" :data="kindData" stripe highlight-current-row border>
                      
                      <el-table-column align="center" prop="goods_id" label="商品ID">
                      </el-table-column>
                      <el-table-column align="center" prop="inType" label="酒厂新酒入库时间">
                      </el-table-column>
                      <el-table-column align="center" prop="inType" label="酒的状态">
                      </el-table-column>
                      <el-table-column align="center" prop="area_name" label="存放位置">
                      </el-table-column>
                      
                    </el-table>
                   
            </div> -->
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="仓库已有ID" name="first">
                    <el-table class="table" :data="kindone" stripe highlight-current-row border>
                      
                        <el-table-column align="center" prop="goodsId" label="商品ID">
                        </el-table-column>
                       
                        <el-table-column align="center" prop="putAt" label="存放位置">
                        </el-table-column>
                        <el-table-column align="center" prop="scanStatus" label="录入状态">
                          <template slot-scope="scope">
                            <span v-if="scope.row.scanStatus == 0">未录入</span>
                            <span v-if="scope.row.scanStatus == 1">已录入</span>
                          </template>
                          </el-table-column>
                      </el-table>
                      <el-pagination
                      @size-change="handleSizeChange"
                      @current-change="handleCurrentChange"
                      :current-page="page.current"
                      :page-sizes="[10,20,30]"
                      :page-size="page.pageSize"
                      layout="total, sizes, prev, pager, next, jumper"
                      :total="page.total">
                    </el-pagination>
                </el-tab-pane>
                <el-tab-pane label="报溢ID" name="second">
                    <el-table class="table" :data="kindone" stripe highlight-current-row border>
                        <!-- <el-table-column align="center" prop="id" label="盘点单号">
                          </el-table-column> -->
                        <el-table-column align="center" prop="goodsId" label="商品ID">
                        </el-table-column>
                       
                        <el-table-column align="center" prop="status" label="报溢">
                          <template slot-scope="scope">
                            <span v-if="scope.row.status == 0">正常</span>
                            <span v-if="scope.row.status == 1">报溢</span>
                            <span v-if="scope.row.status == 2">报损</span>
                          </template>
                        </el-table-column>
                        <!-- <el-table-column align="center" prop="scanStatus" label="录入状态">
                        </el-table-column> -->
                        
                      </el-table>
                      <el-pagination
                      @size-change="handleSizeChange"
                      @current-change="handleCurrentChange"
                      :current-page="page.current"
                      :page-sizes="[10,20,30]"
                      :page-size="page.pageSize"
                      layout="total, sizes, prev, pager, next, jumper"
                      :total="page.total">
                    </el-pagination>
                </el-tab-pane>
               
              </el-tabs>
      </div>
     
    
    </div>
  </template>
  
  <script>
    export default {
      data() {
        return {
          height: "auto",
          skuNo:this.$route.params.id,
          kindData:[],
          activeName:'first',
          
          tableData: [],
          page:{
            pageSize: 10,
            current: 1,
            total: null

          },
          scanStatus:0,
          kindtwo:[],
          kindone:[],
          status:0
        };
      },
      mounted () {
          // console.log(this.$route)
        // this.area();
        // this.tableList();
        this.scandata();
        // this.skuinfo();
      },
      methods: {
           //初始化数据
     
        async scandata() {
        try {
            let { data } = await this.$post({
                api: "/cellar/check/getCheckAllGoods",
                data:{
                  checkNo:this.$route.query.checkNo,
                  current:this.page.current,
                  pageSize:this.page.pageSize,
                  skuNo:this.$route.query.skuid,
                  status:this.status
                }
              });
              if (data.code === 0) {

                  console.log(data)
                this.tableData = data.data.skuInfo;
                this.kindone = data.data.list;
                this.page.total = data.rdPage.total;
               
              } else {
                this.$message({
                  type: "error",
                  message: data.msg
                });
              }
            } catch (e) {
              // this.$message({
              //   type: "error",
              //   message: "接口报错"
              // });
            }
        },
       
        returnOver(){
          this.$router.go(-1);
        },
        handleClick(tab){
         this.status = tab.index;
         this.scandata();
        },
        handleSizeChange(val){
          this.page.pageSize = val;
          
          this.scandata();
        },
        handleCurrentChange(val){
          this.page.current = val;
          this.scandata();
        }
      }
    };
  </script>
  
  <style lang="scss" scoped>
    .query {
      overflow: hidden;
      border-bottom: 1px solid #eeeeee;
      &-item {
        float: left;
        margin: 15px 20px;
      }
      .el-input {
        width: 150px;
      }
      .el-button {
        margin: 0 15px;
        &:last-child {
          margin-right: 0;
        }
      }
    }
  
    .entry-info {
      padding: 15px 20px;
      border-bottom: 1px solid #eeeeee;
    }
  
    .goods-category {
      line-height: 32px;
      span {
        color: #0033ff;
        text-decoration: underline;
        cursor: pointer;
      }
    }
  
    .goods-count {
      line-height: 32px;
    }
  
    .goods-id {
      display: flex;
      justify-content: space-between;
      padding: 0 40px;
      border-left: 1px solid #000;
      border-right: 1px solid #000;
      span {
        position: relative;
        display: inline-block;
        padding: 8px 15px;
        border: 1px solid #333;
        &:after {
          content: "";
          position: absolute;
          top: -6px;
          left: -6px;
          width: 100%;
          height: 100%;
          padding: 6px;
          border: 1px solid #333;
        }
      }
    }
  
    .wrapper {
      padding: 10px 15px;
    }
  
    .canceloff-btn {
      color: #0033ff;
      cursor: pointer;
    }
  </style>